<!--
 * @Author: your name
 * @Date: 2021-05-08 10:06:39
 * @LastEditTime: 2021-07-22 14:52:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\components\projectDetailTabs\tab3.vue
-->

<template>
  <div class="project-detail">
    <div class="btns">
      <a-space v-if="configSuccess == 0" :size="8">
        <a-button @click="onCancel">取消</a-button>
        <a-button type="primary" @click="onSave">保存</a-button>
      </a-space>
      <a-button type="primary" @click="onEdit" v-else>编辑</a-button>
    </div>
    <a-form-model :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" v-if="configSuccess == 0">
      <h3>社保公积金配置</h3>
      <a-form-model-item label="预收账单">
        <a-switch v-model="configState.billOpenIf" />
      </a-form-model-item>
      <a-form-model-item label="预收账单生成日期">
        <a-tooltip placement="top" style="position: absolute;z-index: 9;top: 3px;left: 10px;">
          <template slot="title">
            <span>
              <a-icon type="exclamation-circle" style="margin-right:5px" />
              <span>系统据此日期自动生成账单</span>
            </span>
          </template>
          <a-icon type="question-circle" />
        </a-tooltip>
        <a-select v-model="configState.billGenDay" class="bill-date" placeholder="请选择预收账单生成日期" allow-clear style="width:320px">
          <a-select-option :value="i" v-for="i in 28" :key="i">{{ i }}日</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="预收城市">
        <Vcity mode="multiple" style="width:320px" :before="configState.cityNames" :citydata="cityData" @selectDepCityFn="selectDepCity" />
      </a-form-model-item>
      <a-form-model-item label="超收基数">
        <a-input :max-length="5" v-model="configState.overchargeRatio" style="width:320px" allow-clear>
          <a-tooltip slot="prefix" placement="top">
            <div slot="title">
              <span>
                <a-icon type="exclamation-circle" style="margin-right:5px" />
                <span>预收账单计算时，计算基数=档案基数+超收基数</span>
              </span>
            </div>
            <a-icon type="question-circle" />
          </a-tooltip>
        </a-input>
      </a-form-model-item>
      <h3>薪资配置</h3>
      <a-form-model-item label="账单所属月份">
        <a-radio-group v-model="configState.billMonth">
          <a-radio :value="1">当月计算上月</a-radio>
          <a-radio :value="2">当月计算当月</a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
    <div v-else>
      <h3>社保公积金配置</h3>
      <a-descriptions title=" " :column="1" style="margin-left:350px">
        <a-descriptions-item key="预收账单" label="预收账单">{{configState.billOpenIf?'开启':'关闭'}}</a-descriptions-item>
        <a-descriptions-item key="预收账单生成日期" label="预收账单生成日期">{{configState.billGenDay?'每月'+configState.billGenDay+'日':''}}</a-descriptions-item>
        <a-descriptions-item key="预收城市" label="预收城市">{{configState.cityNames}}</a-descriptions-item>
        <a-descriptions-item key="超收基数" label="超收基数">{{configState.overchargeRatio}}</a-descriptions-item>
      </a-descriptions>
      <h3>薪资配置</h3>
      <a-descriptions title=" " :column="1" style="margin-left:350px">
        <a-descriptions-item key="账单所属月份" label="账单所属月份">{{configState.billMonth==1?'当月计算上月':configState.billMonth==2?'当月计算当月':''}}</a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script>
import Vcity from '@/components/vcity/index';
import { getProjectCity } from '@/services/project';
export default {
  name: 'tab4',
  components: { Vcity },
  props: ['config', 'configSuccess', 'initProjectConfig'],
  data () {
    return {
      cityData: [],
      cityNames: null,
      cityIds: null,
      cityBool: false
    };
  },

  computed: {
    configState: function () {
      return this.config;
    }
  },
  created () {
    this.getProjectCity();
  },
  methods: {
    onEdit () {
      this.$emit('update-config', 'edit');
    },
    onCancel () {
      this.$emit('update-config');
    },
    onSave () {
      this.$emit('update-config', this.configState);
    },
    /**
     * @description: 获取所有城市
     * @param {*}
     * @return {*}
     */

    getProjectCity () {
      getProjectCity().then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.cityData = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    selectDepCity (data) {
      const arr = data.map(item => item.id).map(Number);
      const arr1 = data.map(item => item.name);
      this.cityIds = arr.toString();
      this.cityNames = arr1.toString();
      this.configState.cityIds = arr.toString();
      this.configState.cityNames = arr1.toString();
    },
  },
};
</script>

<style lang="less" scoped>
.project-detail h3 {
  font-size: 16px;
  font-weight: bold;
}
.project-detail /deep/ .ant-form-item-children .address_div {
  height: 30px !important;
  line-height: 30px !important;
}
.project-detail {
  position: relative;
  .btns {
    text-align: right;
    position: absolute;
    right: 0;
  }
}
.bill-date {
  /deep/ .ant-select-selection__rendered {
    padding-left: 15px;
  }
  /deep/ .ant-select-selection__placeholder {
    left: 15px;
  }
}
</style>
